<template>
  <div id="liu">
    <el-carousel :interval="2200" type="card" class="lunbo">
      <el-carousel-item
        v-for="(item,index) in icarousel"
        :key="index"
        indicator-position="none"
        style="border-radius: 10px"
      >
        <el-image :src="item.imageUrl+'?param232y300'" alt height="100%" width="100%"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="allN">
      <span style="font-size:24px;">推荐歌单</span>
      <span style="float:right">
        <a href="#/discover/playlist/cat=全部">更多>></a>
      </span>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item>
          <a href="#/discover/playlist/cat=华语">华语</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/playlist/cat=流行">流行</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/playlist/cat=摇滚">摇滚</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/playlist/cat=民谣">民谣</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/playlist/cat=电子">电子</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item style="display:none">
          <a href="#"></a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <hr />
      <ul class="allNew">
        <li v-for="(item , index) in hotMusic" :key="index">
          <img :src="item.coverImgUrl+'?param=212y212'" />
          <p class="fp" style="font-size:20px;width:230px" @click="playlistInfo(item.id)">{{item.name}}</p>
        </li>
      </ul>
      <span style="font-size:24px;">新碟上架</span>
      <span style="float:right">
        <a href="#/discover/album">更多>></a>
      </span>
      <hr />
      <ul class="newAlbum">
        <li v-for="(item,index) in newAlbum" :key="index" style="padding:0">
          <img :src="item.blurPicUrl+'?param=130y130'" :alt="item.name" />
          <p class="fp" @click="albumInfo(item.id)">{{item.name}}</p>
          <p class="lp" @click="singer(item.artists[0].id)">{{item.artists[0].name}}</p>
        </li>
      </ul>
      <span style="font-size:24px;">榜单</span>
      <span style="float:right">
        <a href="#/discover/toplist">更多>></a>
      </span>
      <hr />
      <div class="bangd">
        <ul class="onebd">
          <li>
            <img
              src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=312y150"
              alt
            />
          </li>
          <li v-for="(it,i) in biaos.tracks" :key="i" v-show="i<10"><span @click="musicInfo(it.id)">{{it.name}}</span><i class="el-icon-video-play" style="float:right" @click="play(it.id)"></i></li>
        </ul>
        <ul class="onebd">
          <li>
            <img
              src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=312y150"
              alt
            />
          </li>
          <li v-for="(it,i) in newM.tracks" :key="i" v-show="i<10"><span @click="musicInfo(it.id)">{{it.name}}</span> <i class="el-icon-video-play" style="float:right" @click="play(it.id)"></i></li>
        </ul>
        <ul class="onebd">
          <li>
            <img
              src="http://p3.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=312y150"
              alt
            />
          </li>
          <li v-for="(it,i) in yc.tracks" :key="i" v-show="i<10"> <span @click="musicInfo(it.id)">{{it.name}}</span> <i class="el-icon-video-play" style="float:right" @click="play(it.id)"></i></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Carousel",
  data() {
    return {
      // 榜单中鼠标事件的flag值
      flag: false,
      // 存放热门推荐的数据数组
      hotMusic: [],
      //飙升
      biaos: [],
      //新歌
      newM: [],
      //原创
      yc: [],
      // 存放新碟的数据数组
      // albumMusic: [],
      newAlbum: [],
      // newlist: [],
      icarousel: []
    };
  },
  methods: {
    play(id) {
      this.$store.commit("chang", id);
    },
    playlistInfo(id){
      this.$router.push("/discover/playlistInfo/id="+id)
    },
    albumInfo(id){
       this.$router.push("/discover/albumInfo/id="+id)
    },
   singer(id){
       this.$router.push("/discover/songerInfo/id="+id)
    },
    musicInfo(id){
      this.$router.push("/discover/musicInfo/id="+id)
    }
  },
    mounted() {
      // this.init();
       axios
          .get("https://autumnfish.cn/top/playlist?limit=8&offset=0")
          .then(input => {
            this.hotMusic=input.data.playlists
          })
          .catch(err => {
            console.log(err);
          });
      axios
        .get("https://autumnfish.cn/banner?type=0")
        .then(banner => {
          this.icarousel = banner.data.banners;
         
        })
        .catch(err => {
          console.log(err);
        });
      //获得最新10张专辑
      axios
        .get("https://autumnfish.cn/album/newest")
        .then(newAlbum => {
          this.newAlbum = newAlbum.data.albums.filter((ele, index) => {
            return index < 10;
          });
        })
        .catch(err => {
          console.log(err);
        });
      //获得榜单数据
      axios
        .get("https://autumnfish.cn/top/list?idx=3")
        .then(sc => {
          this.biaos = sc.data.playlist
        })
        .catch(err => {
          console.log(err);
        });
      axios
        .get("https://autumnfish.cn/top/list?idx=0")
        .then(sc => {
          this.newM = sc.data.playlist
        })
        .catch(err => {
          console.log(err);
        });
      axios
        .get("https://autumnfish.cn/top/list?idx=2")
        .then(sc => {
          this.yc = sc.data.playlist
        })
        .catch(err => {
          console.log(err);
        });
    }
    }
</script>
<style>
 @media screen and (max-width: 650px){
  #liu .allNew{
      grid-template-columns: repeat(2, 50%);
      grid-template-rows: repeat(4, 270px);
      width:500px;
   }
   #liu .el-carousel{
     display: none;
   }
   #liu .newAlbum {
  width: 500px;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(5, 230px);
  margin-top: 20px;
}
#liu .bangd{
  display: block;
}
 }
.allN {
  background-color: white;
  width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 45px;
  border: 2px solid #ccc;
}
.newAlbum li{
   background-image: url(../assets/img/coverall.png);
   background-repeat: no-repeat;
}
#liu .el-carousel {
  margin-top: 35px;
}
#liu .el-breadcrumb {
  display: inline-block;
  margin-left: 20px;
}
#liu hr {
  border: none;
  height: 8px;
  border-bottom: 3px solid #c20c0c;
}
.allNew {
  display: grid;
  list-style: none;
  width: 980px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 270px);
  margin-top: 20px;
}
 .newAlbum {
  display: grid;
  list-style: none;
  width: 980px;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(2, 230px);
  margin-top: 20px;
}

.bangd {
  display: grid;
  list-style: none;
  width: 980px;
  grid-template-columns: repeat(3, 33.333%);
  margin-top:45px;
}
.bangd > ul li:first-child {
  height: 150px;
}
.bangd > ul {
  overflow: hidden;
  border: 2px solid #ccc;
  margin:5px
  
}

#liu .bangd > ul li:nth-child(odd) {
  background-color: rgb(244, 244, 244, 0.7);
  padding: 10px;
}
 #liu .bangd > ul li:nth-child(even) {
  background-color: rgb(232, 232, 232, 0.7);
  padding: 10px;
}
#liu .bangd > ul li:first-child{
  padding:0;
}

#el_col li:nth-child(even) {
  background-color: rgb(232, 232, 232, 0.7);
}
#el_col li:nth-child(odd) {
  background-color: rgb(244, 244, 244, 0.7);
}
.fp {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  width: 153px;
  text-overflow: ellipsis;
}
.lp {
  font-size: 12px;
  color: #666;
}
#liu img {
  box-shadow: 8px 0px 5px rgba(0, 0, 0, 0.4);
}
#liu .bangd img {
  box-shadow: none;
}
</style>
